<template>
  <div id="visualData2">
    <div class="gradient-divider">
      土壤样品钾含量理化分析数据
    </div>
    <div id="echartSoilK"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "visualData2",
  data() {
    return {
      categories: Array.from({ length: 16 }, (_, i) => i + 1), // 样区 1-16
      dataK: {
        '6.11': [2.55, 2.87, 3.42, 3.06, 2.15, 3.02, 2.95, 3.83, 2.38, 2.89, 2.73, 3.52, 3.02, 3.82, 3.14, 3.74],
        '5.21': [2.84, 3.73, 3.22, 3.13, 2.74, 3.18, 3.46, 3.94, 2.89, 3.56, 4.06, 3.67, 3.46, 3.42, 3.46, 3.83],
        '5.5': [3.57, 3.43, 3.90, 3.11, 2.41, 3.61, 3.95, 4.41, 3.15, 4.04, 6.25, 4.23, 6.89, 4.08, 4.13, 4.23]
      }
    }
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      const chart = echarts.init(document.getElementById('echartSoilK'));
      chart.setOption({
        grid: { top: '20%', bottom: '10%', left: '10%', right: '5%' },
        legend: {
          data: Object.keys(this.dataK),
          textStyle: { color: "#fff", fontSize: '12' },
          top: 25
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.categories,
          name: '样区',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } }
        },
        yAxis: {
          type: 'value',
          name: '钾 (%)',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } },
          splitLine: { show: false }
        },
        series: Object.keys(this.dataK).map(date => ({
          name: date,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: this.dataK[date]
        }))
      });
    }
  }
}
</script>

<style scoped lang="scss">
#visualData2 {
  padding: 0 .2em;
}

#echartSoilK {
  height: 220px;
  width: 100%;
}

.gradient-divider {
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  padding: 0 10px;
}


</style>
